<template>
  <div class="case-management">
    <div class="page-header">
      <h1 class="page-title">案件管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="refreshData">
          <i class="fas fa-sync-alt mr-2"></i>刷新
        </el-button>
        <el-button @click="exportData">
          <i class="fas fa-download mr-2"></i>导出
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <div class="stats-cards">
        <div class="stat-card pending" @click="switchTab('pending')">
          <div class="stat-icon">
            <i class="fas fa-clock"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.pending }}</div>
            <div class="stat-label">待鉴定</div>
          </div>
          <div class="stat-trend up">
            <i class="fas fa-arrow-up"></i>
            <span>+3</span>
          </div>
        </div>

        <div class="stat-card in-progress" @click="switchTab('in-progress')">
          <div class="stat-icon">
            <i class="fas fa-play-circle"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.inProgress }}</div>
            <div class="stat-label">鉴定中</div>
          </div>
          <div class="stat-trend up">
            <i class="fas fa-arrow-up"></i>
            <span>+2</span>
          </div>
        </div>

        <div class="stat-card completed" @click="switchTab('completed')">
          <div class="stat-icon">
            <i class="fas fa-check-circle"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.completed }}</div>
            <div class="stat-label">鉴定完成</div>
          </div>
          <div class="stat-trend up">
            <i class="fas fa-arrow-up"></i>
            <span>+5</span>
          </div>
        </div>

        <div class="stat-card overdue" @click="showOverdueCases">
          <div class="stat-icon">
            <i class="fas fa-exclamation-triangle"></i>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.overdue }}</div>
            <div class="stat-label">逾期案件</div>
          </div>
          <div class="stat-trend down">
            <i class="fas fa-arrow-down"></i>
            <span>-1</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 状态标签页 -->
    <div class="tabs-section">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange" class="case-tabs">
        <el-tab-pane label="待鉴定" name="pending">
          <template #label>
            <span class="tab-label">
              <i class="fas fa-clock mr-2"></i>
              待鉴定 ({{ stats.pending }})
            </span>
          </template>
        </el-tab-pane>
        
        <el-tab-pane label="鉴定中" name="in-progress">
          <template #label>
            <span class="tab-label">
              <i class="fas fa-play-circle mr-2"></i>
              鉴定中 ({{ stats.inProgress }})
            </span>
          </template>
        </el-tab-pane>
        
        <el-tab-pane label="鉴定完成" name="completed">
          <template #label>
            <span class="tab-label">
              <i class="fas fa-check-circle mr-2"></i>
              鉴定完成 ({{ stats.completed }})
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-row">
        <el-input
          v-model="searchQuery"
          placeholder="搜索案件编号、客户姓名或案件类型"
          class="search-input"
          clearable
        >
          <template #prefix>
            <i class="fas fa-search"></i>
          </template>
        </el-input>
        
        <el-select v-model="priorityFilter" placeholder="优先级" clearable class="filter-select">
          <el-option label="全部" value=""></el-option>
          <el-option label="紧急" value="urgent"></el-option>
          <el-option label="高" value="high"></el-option>
          <el-option label="中" value="medium"></el-option>
          <el-option label="低" value="low"></el-option>
        </el-select>
        
        <el-select v-model="typeFilter" placeholder="案件类型" clearable class="filter-select">
          <el-option label="全部" value=""></el-option>
          <el-option label="交通事故" value="traffic"></el-option>
          <el-option label="医疗事故" value="medical"></el-option>
          <el-option label="工伤" value="injury"></el-option>
          <el-option label="其他" value="other"></el-option>
        </el-select>
        
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-filter"
          clearable
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
        
        <div class="view-controls">
          <el-radio-group v-model="viewMode" class="view-mode">
            <el-radio-button label="table">
              <i class="fas fa-th-list"></i>
            </el-radio-button>
            <el-radio-button label="card">
              <i class="fas fa-th-large"></i>
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 案件列表 -->
    <div class="cases-section">
      <!-- 表格视图 -->
      <div v-if="viewMode === 'table'" class="table-view">
        <el-table 
          :data="filteredCases" 
          v-loading="loading"
          row-key="id"
          class="cases-table"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          
          <el-table-column prop="caseNumber" label="案件编号" width="140">
            <template #default="{ row }">
              <div class="case-number">
                {{ row.caseNumber }}
                <el-tag 
                  v-if="isOverdue(row.deadline)" 
                  type="danger" 
                  size="small" 
                  class="ml-2"
                >
                  逾期
                </el-tag>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="clientName" label="客户姓名" width="120" />
          
          <el-table-column prop="caseType" label="案件类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getCaseTypeColor(row.caseType)" size="small">
                {{ getCaseTypeText(row.caseType) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="priority" label="优先级" width="100">
            <template #default="{ row }">
              <el-tag 
                :type="getPriorityType(row.priority)" 
                size="small"
              >
                {{ getPriorityText(row.priority) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="assignedDate" label="分配日期" width="120" />
          
          <el-table-column prop="deadline" label="截止日期" width="120">
            <template #default="{ row }">
              <span :class="{ 'text-red-500': isOverdue(row.deadline) }">
                {{ row.deadline }}
              </span>
            </template>
          </el-table-column>
          
          <el-table-column prop="progress" label="进度" width="120">
            <template #default="{ row }">
              <div class="progress-cell">
                <el-progress 
                  :percentage="row.progress" 
                  :color="getProgressColor(row.progress)"
                  size="small"
                />
                <span class="progress-text">{{ row.progress }}%</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="status" label="状态" width="140">
            <template #default="{ row }">
              <el-tag 
                :type="getStatusType(row.status)" 
                size="small"
              >
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="240" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-button 
                  v-if="activeTab === 'pending'"
                  type="primary" 
                  size="small" 
                  @click="startAppraisal(row)"
                >
                  <i class="fas fa-play mr-1"></i>开始鉴定
                </el-button>
                
                <el-button 
                  v-if="activeTab === 'in-progress'"
                  type="success" 
                  size="small" 
                  @click="manageProgress(row)"
                >
                  <i class="fas fa-edit mr-1"></i>管理进度
                </el-button>
                
                <el-button 
                  v-if="activeTab === 'pending' || activeTab === 'in-progress'"
                  type="warning" 
                  size="small" 
                  @click="manageMaterials(row)"
                >
                  <i class="fas fa-folder-open mr-1"></i>材料管理
                </el-button>
                
                <el-button 
                  v-if="activeTab === 'completed'"
                  type="info" 
                  size="small" 
                  @click="viewReport(row)"
                >
                  <i class="fas fa-file-alt mr-1"></i>查看报告
                </el-button>
                
                <el-button 
                  size="small" 
                  @click="viewDetail(row)"
                >
                  <i class="fas fa-eye mr-1"></i>详情
                </el-button>
                
                <el-dropdown trigger="click" size="small">
                  <el-button size="small">
                    <i class="fas fa-ellipsis-v"></i>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="assignExpert(row)">
                        <i class="fas fa-user-md mr-2"></i>分配专家
                      </el-dropdown-item>
                      <el-dropdown-item @click="setDeadline(row)">
                        <i class="fas fa-calendar mr-2"></i>设置期限
                      </el-dropdown-item>
                      <el-dropdown-item @click="addNotes(row)">
                        <i class="fas fa-sticky-note mr-2"></i>添加备注
                      </el-dropdown-item>
                      <el-dropdown-item divided @click="deleteCase(row)">
                        <i class="fas fa-trash mr-2"></i>删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 卡片视图 -->
      <div v-else class="card-view">
        <div class="cases-grid" v-loading="loading">
          <div 
            v-for="case_ in filteredCases" 
            :key="case_.id" 
            class="case-card"
            :class="{ 'overdue': isOverdue(case_.deadline) }"
          >
            <div class="card-header">
              <div class="case-info">
                <h3 class="case-number">{{ case_.caseNumber }}</h3>
                <p class="client-name">{{ case_.clientName }}</p>
              </div>
              <div class="case-status">
                <el-tag 
                  :type="getStatusType(case_.status)" 
                  size="small"
                >
                  {{ getStatusText(case_.status) }}
                </el-tag>
              </div>
            </div>
            
            <div class="card-content">
              <div class="case-details">
                <div class="detail-item">
                  <span class="label">案件类型:</span>
                  <el-tag :type="getCaseTypeColor(case_.caseType)" size="small">
                    {{ getCaseTypeText(case_.caseType) }}
                  </el-tag>
                </div>
                
                <div class="detail-item">
                  <span class="label">优先级:</span>
                  <el-tag :type="getPriorityType(case_.priority)" size="small">
                    {{ getPriorityText(case_.priority) }}
                  </el-tag>
                </div>
                
                <div class="detail-item">
                  <span class="label">分配日期:</span>
                  <span class="value">{{ case_.assignedDate }}</span>
                </div>
                
                <div class="detail-item">
                  <span class="label">截止日期:</span>
                  <span class="value" :class="{ 'text-red-500': isOverdue(case_.deadline) }">
                    {{ case_.deadline }}
                  </span>
                </div>
              </div>
              
              <div class="progress-section">
                <div class="progress-header">
                  <span class="progress-label">进度</span>
                  <span class="progress-percent">{{ case_.progress }}%</span>
                </div>
                <el-progress 
                  :percentage="case_.progress" 
                  :color="getProgressColor(case_.progress)"
                  :show-text="false"
                />
              </div>
            </div>
            
            <div class="card-actions">
              <el-button 
                v-if="activeTab === 'pending'"
                type="primary" 
                size="small" 
                @click="startAppraisal(case_)"
              >
                <i class="fas fa-play mr-1"></i>开始鉴定
              </el-button>
              
              <el-button 
                v-if="activeTab === 'in-progress'"
                type="success" 
                size="small" 
                @click="manageProgress(case_)"
              >
                <i class="fas fa-edit mr-1"></i>管理进度
              </el-button>
              
              <el-button 
                v-if="activeTab === 'pending' || activeTab === 'in-progress'"
                type="warning" 
                size="small" 
                @click="manageMaterials(case_)"
              >
                <i class="fas fa-folder-open mr-1"></i>材料管理
              </el-button>
              
              <el-button 
                v-if="activeTab === 'completed'"
                type="info" 
                size="small" 
                @click="viewReport(case_)"
              >
                <i class="fas fa-file-alt mr-1"></i>查看报告
              </el-button>
              
              <el-button size="small" @click="viewDetail(case_)">
                <i class="fas fa-eye mr-1"></i>详情
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 批量操作栏 -->
      <div v-if="selectedCases.length > 0" class="batch-actions">
        <div class="batch-info">
          <span>已选择 {{ selectedCases.length }} 个案件</span>
        </div>
        <div class="batch-buttons">
          <el-button @click="batchAssignExpert">
            <i class="fas fa-user-md mr-1"></i>批量分配专家
          </el-button>
          <el-button @click="batchSetDeadline">
            <i class="fas fa-calendar mr-1"></i>批量设置期限
          </el-button>
          <el-button @click="batchExport">
            <i class="fas fa-download mr-1"></i>批量导出
          </el-button>
          <el-button type="danger" @click="batchDelete">
            <i class="fas fa-trash mr-1"></i>批量删除
          </el-button>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCases"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <!-- 进度管理对话框 -->
  <el-dialog 
    v-model="progressDialogVisible" 
    :title="`进度管理 - ${currentCase?.caseNumber}`"
    width="90%" 
    :close-on-click-modal="false"
    class="progress-dialog"
    top="5vh"
  >
    <div class="progress-container" v-if="currentCase">
      <!-- 案件基本信息 -->
      <div class="case-summary">
        <div class="summary-grid">
          <div class="summary-item">
            <span class="label">案件编号:</span>
            <span class="value">{{ currentCase.caseNumber }}</span>
          </div>
          <div class="summary-item">
            <span class="label">客户姓名:</span>
            <span class="value">{{ currentCase.clientName }}</span>
          </div>
          <div class="summary-item">
            <span class="label">案件类型:</span>
            <el-tag :type="getCaseTypeColor(currentCase.caseType)" size="small">
              {{ getCaseTypeText(currentCase.caseType) }}
            </el-tag>
          </div>
          <div class="summary-item">
            <span class="label">优先级:</span>
            <el-tag :type="getPriorityType(currentCase.priority)" size="small">
              {{ getPriorityText(currentCase.priority) }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 进度管理标签页 -->
      <el-tabs class="progress-tabs">
        <!-- 里程碑进度 -->
        <el-tab-pane label="里程碑进度" name="milestones">
          <div class="milestones-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-flag-checkered mr-2"></i>
                鉴定里程碑
              </h3>
              <div class="progress-overview">
                <span class="progress-text">总体进度: {{ progressData.reportProgress }}%</span>
                <el-progress 
                  :percentage="progressData.reportProgress" 
                  :color="getProgressColor(progressData.reportProgress)"
                  class="ml-4"
                />
              </div>
            </div>
            
            <div class="milestones-list">
              <div 
                v-for="milestone in progressData.milestones" 
                :key="milestone.id" 
                class="milestone-item"
                :class="{ 'completed': milestone.completed }"
              >
                <div class="milestone-checkbox">
                  <el-checkbox 
                    v-model="milestone.completed" 
                    @change="updateMilestone(milestone)"
                    size="large"
                  />
                </div>
                
                <div class="milestone-content">
                  <h4 class="milestone-name">{{ milestone.name }}</h4>
                  <div class="milestone-date" v-if="milestone.date">
                    <i class="fas fa-calendar-check mr-1"></i>
                    完成时间: {{ milestone.date }}
                  </div>
                </div>
                
                <div class="milestone-status">
                  <el-tag 
                    :type="milestone.completed ? 'success' : 'info'" 
                    size="small"
                  >
                    {{ milestone.completed ? '已完成' : '待完成' }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 报告录入 -->
        <el-tab-pane label="报告录入" name="report">
          <div class="report-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-file-alt mr-2"></i>
                鉴定报告内容
              </h3>
              <el-button type="primary" @click="saveReport">
                <i class="fas fa-save mr-1"></i>
                保存报告
              </el-button>
            </div>
            
            <div class="report-editor">
              <el-input
                v-model="progressData.reportContent"
                type="textarea"
                :rows="20"
                placeholder="请输入鉴定报告内容..."
                class="report-textarea"
              />
            </div>
            
            <div class="report-actions">
              <el-button @click="saveReport">
                <i class="fas fa-save mr-1"></i>
                保存草稿
              </el-button>
              <el-button type="success">
                <i class="fas fa-file-export mr-1"></i>
                导出报告
              </el-button>
              <el-button type="info">
                <i class="fas fa-eye mr-1"></i>
                预览报告
              </el-button>
            </div>
          </div>
        </el-tab-pane>

        <!-- 备注管理 -->
        <el-tab-pane label="备注管理" name="notes">
          <div class="notes-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-sticky-note mr-2"></i>
                工作备注
              </h3>
              <el-button type="primary" @click="addNote">
                <i class="fas fa-plus mr-1"></i>
                添加备注
              </el-button>
            </div>
            
            <div class="notes-list">
              <div 
                v-for="note in progressData.notes" 
                :key="note.id" 
                class="note-item"
              >
                <div class="note-header">
                  <div class="note-meta">
                    <i :class="getNoteTypeIcon(note.type)"></i>
                    <span class="note-author">{{ note.author }}</span>
                    <span class="note-time">{{ note.time }}</span>
                  </div>
                  <div class="note-actions">
                    <el-button 
                      size="small" 
                      @click="saveNote(note)"
                      v-if="!note.content || note.id === progressData.notes[0].id"
                    >
                      <i class="fas fa-save mr-1"></i>
                      保存
                    </el-button>
                    <el-button 
                      size="small" 
                      type="danger" 
                      @click="deleteNote(note.id)"
                    >
                      <i class="fas fa-trash mr-1"></i>
                      删除
                    </el-button>
                  </div>
                </div>
                
                <div class="note-content">
                  <el-input
                    v-model="note.content"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入备注内容..."
                    :readonly="note.id !== progressData.notes[0].id && note.content"
                  />
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 补充材料 -->
        <el-tab-pane label="补充材料" name="materials">
          <div class="materials-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-file-plus mr-2"></i>
                补充材料请求
              </h3>
              <el-button type="primary" @click="requestMaterial">
                <i class="fas fa-plus mr-1"></i>
                请求材料
              </el-button>
            </div>
            
            <div class="materials-list">
              <div 
                v-for="material in progressData.supplementMaterials" 
                :key="material.id" 
                class="material-item"
              >
                <div class="material-header">
                  <div class="material-info">
                    <el-input
                      v-model="material.name"
                      placeholder="材料名称"
                      class="material-name-input"
                    />
                    <el-tag 
                      :type="getMaterialStatusType(material.status)" 
                      size="small"
                      class="ml-2"
                    >
                      {{ getMaterialStatusText(material.status) }}
                    </el-tag>
                  </div>
                  
                  <div class="material-actions">
                    <el-button size="small" @click="saveMaterial(material)">
                      <i class="fas fa-save mr-1"></i>
                      保存
                    </el-button>
                    <el-button 
                      size="small" 
                      type="danger" 
                      @click="deleteMaterial(material.id)"
                    >
                      <i class="fas fa-trash mr-1"></i>
                      删除
                    </el-button>
                  </div>
                </div>
                
                <div class="material-details">
                  <div class="material-dates">
                    <div class="date-item">
                      <span class="date-label">请求日期:</span>
                      <el-date-picker
                        v-model="material.requestDate"
                        type="date"
                        placeholder="请求日期"
                        size="small"
                        value-format="YYYY-MM-DD"
                      />
                    </div>
                    <div class="date-item">
                      <span class="date-label">期望日期:</span>
                      <el-date-picker
                        v-model="material.dueDate"
                        type="date"
                        placeholder="期望收到日期"
                        size="small"
                        value-format="YYYY-MM-DD"
                      />
                    </div>
                  </div>
                  
                  <div class="material-description">
                    <el-input
                      v-model="material.description"
                      type="textarea"
                      :rows="2"
                      placeholder="请说明需要该材料的理由..."
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeProgressDialog">
          <i class="fas fa-times mr-1"></i>
          关闭
        </el-button>
        <el-button type="primary" @click="saveReport">
          <i class="fas fa-save mr-1"></i>
          保存所有更改
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 材料管理对话框 -->
  <el-dialog 
    v-model="materialsDialogVisible" 
    :title="`材料管理 - ${currentMaterialsCase?.caseNumber}`"
    width="90%" 
    :close-on-click-modal="false"
    class="materials-dialog"
    top="5vh"
  >
    <div class="materials-container" v-if="currentMaterialsCase">
      <!-- 案件基本信息 -->
      <div class="case-summary">
        <div class="summary-grid">
          <div class="summary-item">
            <span class="label">案件编号:</span>
            <span class="value">{{ currentMaterialsCase.caseNumber }}</span>
          </div>
          <div class="summary-item">
            <span class="label">客户姓名:</span>
            <span class="value">{{ currentMaterialsCase.clientName }}</span>
          </div>
          <div class="summary-item">
            <span class="label">案件类型:</span>
            <el-tag :type="getCaseTypeColor(currentMaterialsCase.caseType)" size="small">
              {{ getCaseTypeText(currentMaterialsCase.caseType) }}
            </el-tag>
          </div>
          <div class="summary-item">
            <span class="label">当前状态:</span>
            <el-tag :type="getStatusType(currentMaterialsCase.status)" size="small">
              {{ getStatusText(currentMaterialsCase.status) }}
            </el-tag>
          </div>
        </div>
      </div>

      <!-- 材料管理标签页 -->
      <el-tabs class="materials-tabs">
        <!-- 材料清单 -->
        <el-tab-pane label="材料清单" name="materials">
          <div class="materials-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-list-check text-blue-600 mr-2"></i>
                必需材料清单
              </h3>
              <div class="materials-stats">
                <el-tag type="success" size="small" class="mr-2">
                  已完成: {{ materialsData.requiredMaterials.filter(m => m.status === 'complete').length }}
                </el-tag>
                <el-tag type="danger" size="small" class="mr-2">
                  缺失: {{ materialsData.requiredMaterials.filter(m => m.status === 'incomplete').length }}
                </el-tag>
                <el-tag type="warning" size="small">
                  待审核: {{ materialsData.requiredMaterials.filter(m => m.status === 'pending').length }}
                </el-tag>
              </div>
            </div>
            
            <div class="materials-list">
              <div 
                v-for="material in materialsData.requiredMaterials" 
                :key="material.id" 
                class="material-item"
                :class="{ 'material-complete': material.status === 'complete' }"
              >
                <div class="material-header">
                  <div class="material-info">
                    <h4 class="material-name">
                      <i class="fas fa-file-alt text-gray-500 mr-2"></i>
                      {{ material.name }}
                    </h4>
                    <div class="material-meta">
                      <span class="category-tag">{{ getCategoryName(material.category) }}</span>
                      <el-tag 
                        :type="getMaterialStatusType(material.status)" 
                        size="small"
                        class="ml-2"
                      >
                        {{ getMaterialStatusText(material.status) }}
                      </el-tag>
                    </div>
                  </div>
                  
                  <div class="material-actions">
                    <el-button 
                      v-if="material.status === 'incomplete' || material.status === 'rejected'"
                      type="warning" 
                      size="small" 
                      @click="sendReminderToLawyer(material.id)"
                    >
                      <i class="fas fa-bell mr-1"></i>提醒律师
                    </el-button>
                    
                    <el-button 
                      v-if="material.status === 'pending'"
                      type="primary" 
                      size="small" 
                      @click="distributeMaterial(material.id)"
                    >
                      <i class="fas fa-share mr-1"></i>分发审核
                    </el-button>
                    
                    <el-button 
                      v-if="material.status !== 'complete'"
                      type="success" 
                      size="small" 
                      @click="markMaterialComplete(material.id)"
                    >
                      <i class="fas fa-check mr-1"></i>标记齐全
                    </el-button>
                  </div>
                </div>
                
                <div class="material-details">
                  <div v-if="material.submittedDate" class="detail-item">
                    <span class="detail-label">提交日期:</span>
                    <span class="detail-value">{{ material.submittedDate }}</span>
                  </div>
                  <div v-if="material.reviewer" class="detail-item">
                    <span class="detail-label">审核人:</span>
                    <span class="detail-value">{{ material.reviewer }}</span>
                  </div>
                  <div v-if="material.notes" class="detail-item">
                    <span class="detail-label">备注:</span>
                    <span class="detail-value">{{ material.notes }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 律师提醒 -->
        <el-tab-pane label="律师提醒" name="reminders">
          <div class="reminders-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-bell text-orange-600 mr-2"></i>
                律师补材提醒
              </h3>
              <div class="reminders-stats">
                已发送 {{ materialsData.lawyerReminders.filter(r => r.status === 'sent').length }} 条提醒
              </div>
            </div>
            
            <div class="reminders-list">
              <div 
                v-for="reminder in materialsData.lawyerReminders" 
                :key="reminder.id" 
                class="reminder-item"
              >
                <div class="reminder-header">
                  <div class="reminder-info">
                    <h4 class="reminder-material">{{ reminder.materialName }}</h4>
                    <div class="reminder-meta">
                      <span class="meta-item">
                        <i class="fas fa-user mr-1"></i>
                        {{ reminder.lawyerName }}
                      </span>
                      <span class="meta-item">
                        <i class="fas fa-calendar mr-1"></i>
                        提醒日期: {{ reminder.reminderDate }}
                      </span>
                      <span class="meta-item">
                        <i class="fas fa-clock mr-1"></i>
                        期限: {{ reminder.dueDate }}
                      </span>
                    </div>
                  </div>
                  
                  <div class="reminder-status">
                    <el-tag 
                      :type="getReminderStatusType(reminder.status)" 
                      size="small"
                    >
                      {{ getReminderStatusText(reminder.status) }}
                    </el-tag>
                  </div>
                </div>
                
                <div v-if="reminder.response" class="reminder-response">
                  <div class="response-header">
                    <i class="fas fa-reply text-blue-500 mr-2"></i>
                    律师回复
                  </div>
                  <p class="response-content">{{ reminder.response }}</p>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 材料分发 -->
        <el-tab-pane label="材料分发" name="distribution">
          <div class="distribution-section">
            <div class="section-header">
              <h3 class="section-title">
                <i class="fas fa-share-alt text-purple-600 mr-2"></i>
                法医材料分发
              </h3>
              <div class="distribution-stats">
                已分发 {{ materialsData.materialDistribution.length }} 份材料
              </div>
            </div>
            
            <div class="distribution-list">
              <div 
                v-for="distribution in materialsData.materialDistribution" 
                :key="distribution.id" 
                class="distribution-item"
              >
                <div class="distribution-header">
                  <div class="distribution-info">
                    <h4 class="distribution-material">{{ distribution.materialName }}</h4>
                    <div class="distribution-meta">
                      <span class="meta-item">
                        <i class="fas fa-user-md mr-1"></i>
                        分配给: {{ distribution.assignedTo }}
                      </span>
                      <span class="meta-item">
                        <i class="fas fa-calendar mr-1"></i>
                        分发日期: {{ distribution.distributionDate }}
                      </span>
                    </div>
                  </div>
                  
                  <div class="distribution-status">
                    <el-tag 
                      :type="getDistributionStatusType(distribution.status)" 
                      size="small"
                    >
                      {{ getDistributionStatusText(distribution.status) }}
                    </el-tag>
                  </div>
                </div>
                
                <div class="distribution-notes">
                  <span class="notes-label">备注:</span>
                  <span class="notes-content">{{ distribution.notes }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeMaterialsDialog">
          <i class="fas fa-times mr-1"></i>
          关闭
        </el-button>
        <el-button type="primary">
          <i class="fas fa-save mr-1"></i>
          保存更改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'CaseManagement',
  setup() {
    const router = useRouter()
    
    // 状态管理
    const loading = ref(false)
    const activeTab = ref('pending')
    const searchQuery = ref('')
    const priorityFilter = ref('')
    const typeFilter = ref('')
    const dateRange = ref([])
    const viewMode = ref('table')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const selectedCases = ref([])
    
    // 统计数据
    const stats = reactive({
      pending: 23,
      inProgress: 15,
      completed: 47,
      overdue: 3
    })
    
    // 模拟案件数据
    const allCases = ref([
      // 待鉴定案件
      {
        id: 1,
        caseNumber: 'JD2024001',
        clientName: '张三',
        caseType: 'traffic',
        priority: 'urgent',
        assignedDate: '2024-01-15',
        deadline: '2024-02-15',
        progress: 0,
        status: 'pending',
        tab: 'pending'
      },
      {
        id: 2,
        caseNumber: 'JD2024002',
        clientName: '李四',
        caseType: 'medical',
        priority: 'high',
        assignedDate: '2024-01-16',
        deadline: '2024-02-16',
        progress: 0,
        status: 'pending',
        tab: 'pending'
      },
      // 鉴定中案件
      {
        id: 3,
        caseNumber: 'JD2024003',
        clientName: '王五',
        caseType: 'traffic',
        priority: 'medium',
        assignedDate: '2024-01-10',
        deadline: '2024-02-10',
        progress: 45,
        status: 'in-progress',
        tab: 'in-progress'
      },
      {
        id: 4,
        caseNumber: 'JD2024004',
        clientName: '赵六',
        caseType: 'injury',
        priority: 'high',
        assignedDate: '2024-01-12',
        deadline: '2024-02-12',
        progress: 70,
        status: 'in-progress',
        tab: 'in-progress'
      },
      // 鉴定完成案件
      {
        id: 5,
        caseNumber: 'JD2024005',
        clientName: '孙七',
        caseType: 'traffic',
        priority: 'medium',
        assignedDate: '2024-01-05',
        deadline: '2024-02-05',
        progress: 100,
        status: 'completed',
        tab: 'completed'
      },
      {
        id: 6,
        caseNumber: 'JD2024006',
        clientName: '周八',
        caseType: 'medical',
        priority: 'low',
        assignedDate: '2024-01-08',
        deadline: '2024-02-08',
        progress: 100,
        status: 'completed',
        tab: 'completed'
      }
    ])
    
    // 计算属性
    const filteredCases = computed(() => {
      let cases = allCases.value.filter(case_ => case_.tab === activeTab.value)
      
      // 搜索过滤
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        cases = cases.filter(case_ => 
          case_.caseNumber.toLowerCase().includes(query) ||
          case_.clientName.toLowerCase().includes(query) ||
          getCaseTypeText(case_.caseType).toLowerCase().includes(query)
        )
      }
      
      // 优先级过滤
      if (priorityFilter.value) {
        cases = cases.filter(case_ => case_.priority === priorityFilter.value)
      }
      
      // 类型过滤
      if (typeFilter.value) {
        cases = cases.filter(case_ => case_.caseType === typeFilter.value)
      }
      
      // 日期范围过滤
      if (dateRange.value && dateRange.value.length === 2) {
        const [startDate, endDate] = dateRange.value
        cases = cases.filter(case_ => {
          const assignedDate = new Date(case_.assignedDate)
          return assignedDate >= new Date(startDate) && assignedDate <= new Date(endDate)
        })
      }
      
      return cases
    })
    
    const totalCases = computed(() => filteredCases.value.length)
    
    // 方法
    const switchTab = (tab) => {
      activeTab.value = tab
    }
    
    const handleTabChange = (tab) => {
      currentPage.value = 1
      selectedCases.value = []
    }
    
    const handleSelectionChange = (selection) => {
      selectedCases.value = selection
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }
    
    const refreshData = () => {
      loading.value = true
      setTimeout(() => {
        loading.value = false
        ElMessage.success('数据已刷新')
      }, 1000)
    }
    
    const exportData = () => {
      ElMessage.info('导出功能开发中...')
    }
    
    const showOverdueCases = () => {
      // 筛选逾期案件
      searchQuery.value = ''
      priorityFilter.value = ''
      typeFilter.value = ''
      dateRange.value = []
      // 这里可以添加逾期标识的逻辑
      ElMessage.info('已筛选逾期案件')
    }
    
    // 案件操作方法
    const startAppraisal = (case_) => {
      router.push(`/appraisal/identification/${case_.id}`)
    }
    
    // 进度管理相关状态
    const progressDialogVisible = ref(false)
    const currentCase = ref(null)
    const progressData = reactive({
      reportProgress: 0,
      reportContent: '',
      notes: [],
      supplementMaterials: [],
      milestones: [
        { id: 1, name: '材料接收', completed: true, date: '2024-01-15' },
        { id: 2, name: '初步检查', completed: true, date: '2024-01-16' },
        { id: 3, name: '详细分析', completed: false, date: null },
        { id: 4, name: '报告撰写', completed: false, date: null },
        { id: 5, name: '审核确认', completed: false, date: null }
      ]
    })
    
    const manageProgress = (case_) => {
      currentCase.value = case_
      // 模拟加载进度数据
      progressData.reportProgress = case_.progress
      progressData.reportContent = `案件 ${case_.caseNumber} 的鉴定报告\n\n一、案情概述\n${case_.clientName}因交通事故受伤，委托鉴定伤残等级。\n\n二、检查情况\n（待补充）\n\n三、鉴定分析\n（待补充）\n\n四、鉴定意见\n（待补充）`
      progressData.notes = [
        {
          id: 1,
          content: '案件材料已收到，开始初步检查',
          author: '张医师',
          time: '2024-01-15 14:30',
          type: 'system'
        },
        {
          id: 2,
          content: '建议补充CT检查报告',
          author: '李医师',
          time: '2024-01-16 09:15',
          type: 'suggestion'
        }
      ]
      progressData.supplementMaterials = [
        {
          id: 1,
          name: 'CT检查报告',
          status: 'requested',
          requestDate: '2024-01-16',
          dueDate: '2024-01-20',
          description: '需要头部CT检查报告以确认脑部损伤情况'
        }
      ]
      
      progressDialogVisible.value = true
    }
    
    const closeProgressDialog = () => {
      progressDialogVisible.value = false
      currentCase.value = null
    }
    
    const saveReport = () => {
      ElMessage.success('报告内容已保存')
    }
    
    const addNote = () => {
      const newNote = {
        id: Date.now(),
        content: '',
        author: '当前用户',
        time: new Date().toLocaleString(),
        type: 'manual'
      }
      progressData.notes.unshift(newNote)
    }
    
    const saveNote = (note) => {
      if (!note.content.trim()) {
        ElMessage.warning('请输入备注内容')
        return
      }
      ElMessage.success('备注已保存')
    }
    
    const deleteNote = (noteId) => {
      const index = progressData.notes.findIndex(note => note.id === noteId)
      if (index > -1) {
        progressData.notes.splice(index, 1)
        ElMessage.success('备注已删除')
      }
    }
    
    const requestMaterial = () => {
      const newMaterial = {
        id: Date.now(),
        name: '',
        status: 'requested',
        requestDate: new Date().toISOString().split('T')[0],
        dueDate: '',
        description: ''
      }
      progressData.supplementMaterials.push(newMaterial)
    }
    
    const saveMaterial = (material) => {
      if (!material.name.trim()) {
        ElMessage.warning('请输入材料名称')
        return
      }
      ElMessage.success('补充材料请求已保存')
    }
    
    const deleteMaterial = (materialId) => {
      const index = progressData.supplementMaterials.findIndex(material => material.id === materialId)
      if (index > -1) {
        progressData.supplementMaterials.splice(index, 1)
        ElMessage.success('材料请求已删除')
      }
    }
    
    const updateMilestone = (milestone) => {
      milestone.completed = !milestone.completed
      if (milestone.completed && !milestone.date) {
        milestone.date = new Date().toISOString().split('T')[0]
      } else if (!milestone.completed) {
        milestone.date = null
      }
      
      // 更新案件进度百分比
      const completedMilestones = progressData.milestones.filter(m => m.completed).length
      const totalMilestones = progressData.milestones.length
      progressData.reportProgress = Math.round((completedMilestones / totalMilestones) * 100)
      
      ElMessage.success(`里程碑"${milestone.name}"已${milestone.completed ? '完成' : '重置'}`)
    }
    

    
    const getNoteTypeIcon = (type) => {
      const icons = {
        'system': 'fas fa-info-circle text-blue-500',
        'suggestion': 'fas fa-lightbulb text-yellow-500',
        'manual': 'fas fa-user text-green-500'
      }
      return icons[type] || 'fas fa-comment text-gray-500'
    }
    
    // 材料管理相关状态
    const materialsDialogVisible = ref(false)
    const currentMaterialsCase = ref(null)
    const materialsData = reactive({
      requiredMaterials: [
        {
          id: 1,
          name: '身份证复印件',
          category: 'identity',
          status: 'complete',
          submittedDate: '2024-01-15',
          reviewer: '张法医',
          notes: '清晰可见，符合要求'
        },
        {
          id: 2,
          name: '交通事故认定书',
          category: 'legal',
          status: 'complete',
          submittedDate: '2024-01-16',
          reviewer: '李法医',
          notes: '责任认定清楚'
        },
        {
          id: 3,
          name: '医疗病历资料',
          category: 'medical',
          status: 'incomplete',
          submittedDate: null,
          reviewer: null,
          notes: '缺少住院病历'
        },
        {
          id: 4,
          name: 'CT检查报告',
          category: 'medical',
          status: 'pending',
          submittedDate: '2024-01-17',
          reviewer: null,
          notes: '待法医审核'
        },
        {
          id: 5,
          name: '现场照片',
          category: 'evidence',
          status: 'rejected',
          submittedDate: '2024-01-14',
          reviewer: '王法医',
          notes: '照片不够清晰，需要重新提供'
        }
      ],
      lawyerReminders: [],
      materialDistribution: []
    })
    
    const manageMaterials = (case_) => {
      currentMaterialsCase.value = case_
      
      // 模拟加载材料数据
      materialsData.lawyerReminders = [
        {
          id: 1,
          materialName: '住院病历',
          reminderDate: '2024-01-18',
          status: 'sent',
          lawyerName: '张律师',
          dueDate: '2024-01-22',
          response: null
        },
        {
          id: 2,
          materialName: '更清晰的现场照片',
          reminderDate: '2024-01-17',
          status: 'pending',
          lawyerName: '张律师',
          dueDate: '2024-01-21',
          response: null
        }
      ]
      
      materialsData.materialDistribution = [
        {
          id: 1,
          materialName: '身份证复印件',
          distributionDate: '2024-01-15',
          assignedTo: '张法医',
          status: 'reviewed',
          notes: '已审核完成'
        },
        {
          id: 2,
          materialName: 'CT检查报告',
          distributionDate: '2024-01-17',
          assignedTo: '李法医',
          status: 'in-review',
          notes: '正在审核中'
        }
      ]
      
      materialsDialogVisible.value = true
    }
    
    const closeMaterialsDialog = () => {
      materialsDialogVisible.value = false
      currentMaterialsCase.value = null
    }
    
    const sendReminderToLawyer = (materialId) => {
      const material = materialsData.requiredMaterials.find(m => m.id === materialId)
      if (material) {
        const newReminder = {
          id: Date.now(),
          materialName: material.name,
          reminderDate: new Date().toISOString().split('T')[0],
          status: 'sent',
          lawyerName: '张律师',
          dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString().split('T')[0],
          response: null
        }
        materialsData.lawyerReminders.unshift(newReminder)
        ElMessage.success(`已向律师发送${material.name}补充提醒`)
      }
    }
    
    const distributeMaterial = (materialId) => {
      const material = materialsData.requiredMaterials.find(m => m.id === materialId)
      if (material && material.status === 'pending') {
        const newDistribution = {
          id: Date.now(),
          materialName: material.name,
          distributionDate: new Date().toISOString().split('T')[0],
          assignedTo: '李法医',
          status: 'in-review',
          notes: '已分发待审核'
        }
        materialsData.materialDistribution.unshift(newDistribution)
        material.status = 'in-review'
        ElMessage.success(`${material.name}已分发给法医审核`)
      }
    }
    
    const markMaterialComplete = (materialId) => {
      const material = materialsData.requiredMaterials.find(m => m.id === materialId)
      if (material) {
        material.status = 'complete'
        material.reviewer = '当前用户'
        if (!material.submittedDate) {
          material.submittedDate = new Date().toISOString().split('T')[0]
        }
        ElMessage.success(`${material.name}已标记为齐全`)
      }
    }
    
    const getMaterialStatusType = (status) => {
      const types = {
        'complete': 'success',
        'incomplete': 'danger',
        'pending': 'warning',
        'rejected': 'danger',
        'in-review': 'primary'
      }
      return types[status] || 'info'
    }
    
    const getMaterialStatusText = (status) => {
      const texts = {
        'complete': '齐全',
        'incomplete': '缺失',
        'pending': '待审核',
        'rejected': '被拒绝',
        'in-review': '审核中'
      }
      return texts[status] || '未知'
    }
    
    const getReminderStatusType = (status) => {
      const types = {
        'sent': 'success',
        'pending': 'warning',
        'responded': 'primary'
      }
      return types[status] || 'info'
    }
    
    const getReminderStatusText = (status) => {
      const texts = {
        'sent': '已发送',
        'pending': '待发送',
        'responded': '已回复'
      }
      return texts[status] || '未知'
    }
    
    const getDistributionStatusType = (status) => {
      const types = {
        'in-review': 'primary',
        'reviewed': 'success',
        'returned': 'warning'
      }
      return types[status] || 'info'
    }
    
    const getDistributionStatusText = (status) => {
      const texts = {
        'in-review': '审核中',
        'reviewed': '已审核',
        'returned': '已退回'
      }
      return texts[status] || '未知'
    }

    // 获取材料类别名称
    const getCategoryName = (category) => {
      const categoryMap = {
        medical: '医疗材料',
        identity: '身份材料',
        legal: '法律文件',
        evidence: '证据材料',
        forensic: '鉴定材料',
        insurance: '保险材料'
      }
      return categoryMap[category] || '其他材料'
    }
    
    const viewReport = (case_) => {
      ElMessage.info(`查看案件 ${case_.caseNumber} 的鉴定报告`)
      // 这里可以打开报告查看对话框
    }
    
    const viewDetail = (case_) => {
      router.push(`/appraisal/case/${case_.id}`)
    }
    
    const assignExpert = (case_) => {
      ElMessage.info(`为案件 ${case_.caseNumber} 分配专家`)
    }
    
    const setDeadline = (case_) => {
      ElMessage.info(`设置案件 ${case_.caseNumber} 的截止日期`)
    }
    
    const addNotes = (case_) => {
      ElMessage.info(`为案件 ${case_.caseNumber} 添加备注`)
    }
    
    const deleteCase = (case_) => {
      ElMessageBox.confirm(
        `确认删除案件 ${case_.caseNumber} 吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        ElMessage.success('删除成功')
      }).catch(() => {
        ElMessage.info('已取消删除')
      })
    }
    
    // 批量操作方法
    const batchAssignExpert = () => {
      ElMessage.info(`批量为 ${selectedCases.value.length} 个案件分配专家`)
    }
    
    const batchSetDeadline = () => {
      ElMessage.info(`批量为 ${selectedCases.value.length} 个案件设置期限`)
    }
    
    const batchExport = () => {
      ElMessage.info(`批量导出 ${selectedCases.value.length} 个案件`)
    }
    
    const batchDelete = () => {
      ElMessageBox.confirm(
        `确认删除选中的 ${selectedCases.value.length} 个案件吗？`,
        '批量删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        selectedCases.value = []
        ElMessage.success('批量删除成功')
      }).catch(() => {
        ElMessage.info('已取消删除')
      })
    }
    
    // 工具方法
    const getCaseTypeColor = (type) => {
      const colors = {
        traffic: 'danger',
        medical: 'warning',
        injury: 'success',
        other: 'info'
      }
      return colors[type] || 'info'
    }
    
    const getCaseTypeText = (type) => {
      const texts = {
        traffic: '交通事故',
        medical: '医疗事故',
        injury: '工伤',
        other: '其他'
      }
      return texts[type] || '未知'
    }
    
    const getPriorityType = (priority) => {
      const types = {
        urgent: 'danger',
        high: 'warning',
        medium: 'primary',
        low: 'info'
      }
      return types[priority] || 'info'
    }
    
    const getPriorityText = (priority) => {
      const texts = {
        urgent: '紧急',
        high: '高',
        medium: '中',
        low: '低'
      }
      return texts[priority] || '未知'
    }
    
    const getStatusType = (status) => {
      const types = {
        pending: 'warning',
        'in-progress': 'primary',
        completed: 'success'
      }
      return types[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const texts = {
        pending: '待鉴定',
        'in-progress': '鉴定中',
        completed: '鉴定完成'
      }
      return texts[status] || '未知'
    }
    
    const getProgressColor = (progress) => {
      if (progress < 30) return '#f56c6c'
      if (progress < 70) return '#e6a23c'
      return '#67c23a'
    }
    
    const isOverdue = (deadline) => {
      const today = new Date()
      const deadlineDate = new Date(deadline)
      return deadlineDate < today
    }
    
    // 监听Tab变化，更新统计数据
    watch(activeTab, () => {
      // 这里可以根据需要更新统计数据
    })
    
    // 初始化
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      loading,
      activeTab,
      searchQuery,
      priorityFilter,
      typeFilter,
      dateRange,
      viewMode,
      currentPage,
      pageSize,
      selectedCases,
      stats,
      filteredCases,
      totalCases,
      progressDialogVisible,
      currentCase,
      progressData,
      materialsDialogVisible,
      currentMaterialsCase,
      materialsData,
      switchTab,
      handleTabChange,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      refreshData,
      exportData,
      showOverdueCases,
      startAppraisal,
      manageProgress,
      closeProgressDialog,
      manageMaterials,
      closeMaterialsDialog,
      sendReminderToLawyer,
      distributeMaterial,
      markMaterialComplete,
      saveReport,
      addNote,
      saveNote,
      deleteNote,
      requestMaterial,
      saveMaterial,
      deleteMaterial,
      updateMilestone,
      getMaterialStatusType,
      getMaterialStatusText,
      getReminderStatusType,
      getReminderStatusText,
      getDistributionStatusType,
      getDistributionStatusText,
      getCategoryName,
      getNoteTypeIcon,
      viewReport,
      viewDetail,
      assignExpert,
      setDeadline,
      addNotes,
      deleteCase,
      batchAssignExpert,
      batchSetDeadline,
      batchExport,
      batchDelete,
      getCaseTypeColor,
      getCaseTypeText,
      getPriorityType,
      getPriorityText,
      getStatusType,
      getStatusText,
      getProgressColor,
      isOverdue
    }
  }
}
</script>

<style scoped>
.case-management {
  padding: 20px 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 24px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-card.pending {
  border-left: 4px solid #f59e0b;
}

.stat-card.pending:hover {
  border-color: #f59e0b;
}

.stat-card.in-progress {
  border-left: 4px solid #3b82f6;
}

.stat-card.in-progress:hover {
  border-color: #3b82f6;
}

.stat-card.completed {
  border-left: 4px solid #10b981;
}

.stat-card.completed:hover {
  border-color: #10b981;
}

.stat-card.overdue {
  border-left: 4px solid #ef4444;
}

.stat-card.overdue:hover {
  border-color: #ef4444;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.stat-card.pending .stat-icon {
  background: #fef3c7;
  color: #f59e0b;
}

.stat-card.in-progress .stat-icon {
  background: #dbeafe;
  color: #3b82f6;
}

.stat-card.completed .stat-icon {
  background: #d1fae5;
  color: #10b981;
}

.stat-card.overdue .stat-icon {
  background: #fee2e2;
  color: #ef4444;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1.2;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}

.stat-trend.up {
  color: #10b981;
}

.stat-trend.down {
  color: #ef4444;
}

/* 标签页 */
.tabs-section {
  margin-bottom: 24px;
}

.case-tabs {
  background: white;
  border-radius: 8px;
  padding: 0 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tab-label {
  display: flex;
  align-items: center;
  font-weight: 500;
}

/* 搜索筛选 */
.search-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
}

.filter-select {
  width: 140px;
}

.date-filter {
  width: 260px;
}

.view-controls {
  margin-left: auto;
}

.view-mode {
  border-radius: 6px;
  overflow: hidden;
}

/* 案件列表 */
.cases-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 表格视图 */
.table-view {
  padding: 20px;
}

.cases-table {
  width: 100%;
}

.case-number {
  font-weight: 600;
  color: #1f2937;
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-text {
  font-size: 12px;
  color: #6b7280;
  min-width: 35px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 卡片视图 */
.card-view {
  padding: 20px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.case-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  overflow: hidden;
  transition: all 0.3s ease;
}

.case-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.case-card.overdue {
  border-left: 4px solid #ef4444;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.case-info h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.client-name {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.card-content {
  padding: 20px;
}

.case-details {
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-item .label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.detail-item .value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.progress-section {
  margin-top: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.progress-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.progress-percent {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

.card-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

/* 批量操作 */
.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f0f9ff;
  border-top: 1px solid #e5e7eb;
}

.batch-info {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

/* 分页 */
.pagination-section {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid #e5e7eb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .search-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input,
  .filter-select,
  .date-filter {
    width: 100%;
  }
  
  .view-controls {
    margin-left: 0;
    align-self: center;
  }
  
  .cases-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .batch-buttons {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .stat-number {
    font-size: 24px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .stat-card {
    padding: 12px;
    gap: 12px;
  }
}

/* 进度管理对话框样式 */
.progress-dialog {
  border-radius: 12px;
}

.progress-container {
  max-height: 75vh;
  overflow-y: auto;
}

/* 案件摘要 */
.case-summary {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid #e5e7eb;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-item .label {
  font-weight: 500;
  color: #6b7280;
  min-width: 80px;
}

.summary-item .value {
  font-weight: 600;
  color: #1f2937;
}

/* 进度标签页 */
.progress-tabs {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 通用章节样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
}

/* 里程碑样式 */
.milestones-section {
  padding: 20px;
}

.progress-overview {
  display: flex;
  align-items: center;
  gap: 16px;
}

.progress-text {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.milestones-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.milestone-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  transition: all 0.3s ease;
}

.milestone-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.milestone-item.completed {
  background: #f0f9ff;
  border-color: #3b82f6;
}

.milestone-checkbox {
  flex-shrink: 0;
}

.milestone-content {
  flex: 1;
}

.milestone-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.milestone-date {
  font-size: 12px;
  color: #059669;
  display: flex;
  align-items: center;
}

.milestone-status {
  flex-shrink: 0;
}

/* 报告编辑器样式 */
.report-section {
  padding: 20px;
}

.report-editor {
  margin-bottom: 20px;
}

.report-textarea {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.report-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 备注样式 */
.notes-section {
  padding: 20px;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.note-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-author {
  font-weight: 500;
  color: #1f2937;
  font-size: 14px;
}

.note-time {
  font-size: 12px;
  color: #6b7280;
}

.note-actions {
  display: flex;
  gap: 8px;
}

.note-content {
  padding: 16px;
}

/* 补充材料样式 */
.materials-section {
  padding: 20px;
}

.materials-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.material-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.material-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.material-name-input {
  max-width: 300px;
}

.material-actions {
  display: flex;
  gap: 8px;
}

.material-details {
  padding: 16px;
}

.material-dates {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.date-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  min-width: 80px;
}

.material-description {
  margin-top: 12px;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0 0;
  border-top: 1px solid #e5e7eb;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .progress-container {
    max-height: 65vh;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .progress-overview {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .milestone-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .note-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .material-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .material-dates {
    flex-direction: column;
    gap: 12px;
  }
  
  .report-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .dialog-footer {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .case-summary {
    padding: 16px;
  }
  
  .milestones-section,
  .report-section,
  .notes-section,
  .materials-section {
    padding: 16px;
  }
  
  .material-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .material-name-input {
    max-width: 100%;
  }
}

/* 材料管理对话框样式 */
.materials-dialog {
  border-radius: 12px;
}

.materials-dialog .el-dialog__body {
  padding: 0;
}

.materials-container {
  max-height: 80vh;
  overflow-y: auto;
}

.case-summary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px;
  margin: -1px -1px 0 -1px;
  border-radius: 12px 12px 0 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-item .label {
  font-size: 14px;
  opacity: 0.9;
  font-weight: 500;
}

.summary-item .value {
  font-size: 16px;
  font-weight: 600;
}

.materials-tabs {
  padding: 24px;
}

.materials-tabs .el-tabs__header {
  margin: 0 0 24px 0;
}

.materials-tabs .el-tabs__nav-wrap::after {
  background-color: #e5e7eb;
}

.materials-section,
.reminders-section,
.distribution-section {
  min-height: 400px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f3f4f6;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  display: flex;
  align-items: center;
}

.materials-stats,
.reminders-stats,
.distribution-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6b7280;
}

.materials-list,
.reminders-list,
.distribution-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.material-item,
.reminder-item,
.distribution-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.material-item:hover,
.reminder-item:hover,
.distribution-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

.material-item.material-complete {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #10b981;
}

.material-header,
.reminder-header,
.distribution-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.material-info,
.reminder-info,
.distribution-info {
  flex: 1;
}

.material-name,
.reminder-material,
.distribution-material {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.material-meta,
.reminder-meta,
.distribution-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.category-tag {
  background: #f3f4f6;
  color: #6b7280;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6b7280;
}

.material-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.material-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px 0 0 0;
  border-top: 1px solid #e5e7eb;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 500;
}

.reminder-response {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 4px solid #3b82f6;
}

.response-header {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.response-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

.distribution-notes {
  margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid #e5e7eb;
}

.notes-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 8px;
}

.notes-content {
  font-size: 14px;
  color: #1f2937;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .materials-container {
    max-height: 70vh;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .material-header,
  .reminder-header,
  .distribution-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .material-details {
    grid-template-columns: 1fr;
  }
  
  .material-actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .material-actions .el-button {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .case-summary {
    padding: 16px;
  }
  
  .materials-tabs {
    padding: 16px;
  }
  
  .material-item,
  .reminder-item,
  .distribution-item {
    padding: 16px;
  }
  
  .material-meta,
  .reminder-meta,
  .distribution-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
